<template>
  <div>
    <van-nav-bar
      title="编辑"
      left-arrow
      @click-left="$router.push('/myClients')"
    >
      <template #right>
        <img
          src="../../assets/images/首页按钮.png"
          alt=""
          width="50%"
          @click="$router.push('/home')"
        />
      </template>
    </van-nav-bar>

    <div class="nameAndphone">
      <div class="name-hea">
        <label for="name">客户姓名</label>
        <input
          type="text"
         
          id="name"
          v-model="nameVal"
        />
      </div>

      <div class="name-hea">
        <label for="phone">联系方式</label>
        <input
          type="text"
          
          id="phone"
          v-model="phoneVal"
        />
      </div>
    </div>
    <ul>
      <li class="name-hea">
        <label for="education">学历</label>
        <input
          type="text"
          
          id="education"
          v-model="educationVal"
        />
      </li>
      <li class="name-hea">
        <label for="age">年龄</label>
        <input type="text"  id="age" v-model="ageVal" />
      </li>
      <li class="name-hea">
        <label for="sex">性别</label>
        <input type="text"  id="sex" v-model="sexVal" />
      </li>
      <li class="name-hea">
        <label for="cityName">所属城市</label>
        <input
          type="text"
        
          id="cityName"
          v-model="cityNameVal"
        />
      </li>
      <li class="name-hea">
        <label for="company">公司名称</label>
        <input
          type="text"
          
          id="company"
          v-model="companyVal"
        />
      </li>
      <li class="name-hea">
        <label for="position">职务</label>
        <input
          type="text"
       
          id="position"
          v-model="positionVal"
        />
      </li>
    </ul>

    <button class="btn" @click="xiugai">确认修改</button>
  </div>
</template>

<script>
import { CustDetail ,custxiugai} from "../../request/api";
export default {
  data() {
    return {
      list: [],
      // 客户姓名
      nameVal: "",
      // 联系方式
      phoneVal: "",
      // 学历
      educationVal: "",
      // 年龄
      ageVal:"",
      // 性别
      sexVal:"",
      // 所属城市
      cityNameVal:"",
      // 公司名称
      companyVal:"",
      // 职务
      positionVal:"",
    };
  },
   created(){
    CustDetail({
      id:this.$route.query.id
    }).then(res=>{
      this.list = res.data;
      this.nameVal = this.list.custName;
      this.phoneVal = this.list.telephone;
      this.educationVal = this.list.education;
      this.ageVal = this.list.age;
      this.sexVal = this.list.sex;
      this.cityNameVal = this.list.cityName;
      this.companyVal = this.list.company;
      this.positionVal = this.list.position;
    })
  },

  methods:{
      xiugai(){
            custxiugai({
                 id:this.$route.query.id,
                "custName":this.nameVal,
                "cityName":this.cityNameVal,
                "company":this.companyVal,
                "position":this.positionVal,
                "telephone":this.phoneVal,
                "education":this.educationVal,
                "sex":this.sexVal,
                "age":this.ageVal
            }).then(res=>{
                console.log(res);
                if(res.errCode==0){
                    this.$router.push('/myClients')
                }
            })

            
      }
  }
};
</script>
 
<style lang = "less" scoped>
/deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-nav-bar__right {
    padding: 0;
  }
}

.nameAndphone,
ul {
  margin-top: 10px;
  background-color: #fff;
}

.name-hea {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
  input {
    text-align: right;
    border: 0;
    width: 200px;
    color: #999;
  }
}

.btn{
    width: 90%;
    padding: 10px;
    border: 0;
    background-color: #003399;
    color: #fff;
    border-radius: 20px;
    margin-left: 15px;
    position: absolute;
    bottom:20px;
}
</style>